<template>
  <div class="btn-drag-position">
    <a-form-item
      :field="id"
      :rules="rules"
      :validate-trigger="itemConfig.validateTrigger"
      :tooltip="itemConfig.tooltip"
      :label="itemConfig.label"
      :label-col-flex="itemConfig.labelColFlex + 'px'"
      :feedback="itemConfig.feedback"
      :show-colon="itemConfig.showColon"
      :required="itemConfig.required"
      :asterisk-position="itemConfig.asteriskPosition"
      :hide-label="itemConfig.hideLabel"
      :hide-asterisk="itemConfig.hideAsterisk"
      :class="[selected && selected.id === id && formType === 'design' ? 'drag-selected' : '']"
      @click.stop="selectItem"
    >
      <slot></slot>
    </a-form-item>

    <template v-if="selected && selected.id === id && formType === 'design'">
      <div class="btn-drag">
        <div class="btn-drag-icon">
          <icon-drag-arrow />
          {{ itemConfig.label }}
        </div>
      </div>

      <div class="btn-group">
        <a-button-group type="primary" status="normal">
          <a-button size="small">
            <template #icon>
              <icon-heart-fill />
            </template>
          </a-button>
          <a-button size="small" @click.stop="copyItem">
            <template #icon>
              <icon-copy />
            </template>
          </a-button>
          <a-button size="small" @click.stop="deleteItem">
            <template #icon>
              <icon-delete />
            </template>
          </a-button>
        </a-button-group>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { inject, defineProps, defineEmits, computed } from 'vue';

const props = defineProps({
  id: {
    type: String,
    default: () => ''
  },
  item: {
    type: Object,
    default: () => {

    }
  },
  itemConfig: {
    type: Object,
    default: () => {
    }
  }
});

const emits = defineEmits(['selectItem', 'deleteItem', 'copyItem']);

const selected = inject('selected');

const formType = inject('formType');

const rules = computed(() => {
  const result = [];
  if (props.itemConfig.required) {
    result.push({
      required: true,
      message: `${props.itemConfig.label}是必填项`
    });
  }
  if (props.itemConfig.ruleType) {
    result.push({
      type: props.itemConfig.ruleType,
      message: props.itemConfig.ruleMessage
    });
  }
  if (props.itemConfig.ruleMatch) {
    result.push({
      match: new RegExp(props.itemConfig.ruleMatch),
      message: props.itemConfig.ruleMessage
    });
  }
  return result;
});

const selectItem = () => {
  emits('selectItem', props.item);
};

const deleteItem = () => {
  emits('deleteItem', props.item);
};

const copyItem = () => {
  emits('copyItem', props.item);
};

</script>

<script lang="ts">
export default {
  name: 'FormItemContainer'
};
</script>

<style lang="less" scoped>
@import "common-container";
</style>